<template>
    <view class="container">
        <view class="current-bill">
            <view class="head">本期账单</view>
            <view v-if="payOff == 1">
                <view class="total">{{ Number(billAmount + lateFee).toFixed(2) }}</view>
                <view class="refund">已还{{ Number(paidAmount).toFixed(2) }}</view>
                <view>
                    <u-button type="p" shape="circle" class="prepayment-btn" @click="jump2pay">还款</u-button>
                </view>
            </view>
            <view v-if="payOff == 0" class="payOff">
                <view class="total">{{ Number(billAmount).toFixed(2) }}</view>
                您的本期账单已经还清!
            </view>
            <view class="record" @click="showOrderRecods">订单记录</view>
            <view class="refund-record" @click="refundRecord">还款记录</view>
        </view>
        <!-- 未出账单 -->
        <view class="future-bill" @click="gotoFutureBill" v-if="amount">
            <view class="u-flex u-row-between u-col-center">
                <view>
                    <view class="head">未出账单</view>
                    <view class="sum-money"
                        >累计金额：
                        <text class="num">{{ Number(amount).toFixed(2) }}</text>
                    </view>
                </view>
                <view class="make-bill-date">
                    出账日{{ $u.$timeUtil.formatDate(date, 'yyyy-MM-dd') }}
                    <text class="icon icon-right u-margin-left-20"></text>
                </view>
            </view>
        </view>
        <!-- 详情 -->
        <view class="bill-detail">
            <view class="title u-text-center bb">详情</view>
            <view class="bb">
                账单编号：
                <text class="contract-code">{{ id }}</text>
            </view>
            <view class="bb">
                应还款总金额：
                <text>{{ Number(repaymentTotalAmount).toFixed(2) }}</text>
            </view>
            <view class="bb">
                账期金额：
                <text>{{ Number(billAmount).toFixed(2) }}</text>
            </view>
            <view class="bb u-flex u-row-between">
                <view class="">
                    逾期滞纳金：
                    <text>{{ Number(lateFee).toFixed(2) }}</text>
                </view>
                <text class="contract-code" @click="overdueFine">滞纳金记录</text>
            </view>
            <view class="bb">
                账期期限：
                <text>{{ $u.$timeUtil.formatDate(billStartDate, 'yyyy-MM-dd') }} ~ {{ $u.$timeUtil.formatDate(billDate, 'yyyy-MM-dd') }}</text>
            </view>
            <view class="bb">
                最后还款日：
                <text>{{ $u.$timeUtil.formatDate(lastPaidDate, 'yyyy-MM-dd') }}</text>
            </view>
            <view class="bb">
                交易时间：
                <text>{{ $u.$timeUtil.formatDate(billStartDate, 'yyyy-MM-dd hh:mm:ss') }}</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import { useGlobalStore } from '@/store'

/** 0: 账单已经还清  1: 未还清 */
const payOff = ref(-1)
const billAmount = ref(0)
/** 滞纳金 */
const lateFee = ref(0)
/** 已还金额 */
const paidAmount = ref(0)
/** 账单编号 */
const id = ref(0)

const nextBillId = ref(0)

const amount = ref(0)

const date = ref('')
/** 应还总金额 */
const repaymentTotalAmount = ref(0)

const billStartDate = ref('')
const billDate = ref('')
const lastPaidDate = ref('')

const globalStore = useGlobalStore()

const $u = computed(() => {
    return uni.$u
})

onLoad((option: any) => {
    if (option.loadData) {
        id.value = option.no
        loadData(option.no)
    } else {
        nextBillId.value = option.nextBillId
        amount.value = Number(option.amount)
        date.value = option.date
        payOff.value = option.payOff
        init()
    }
})

const init = () => {
    let bill: any = globalStore.data

    id.value = bill.id // 账单编号
    billAmount.value = bill.billAmount // 本期账单  账期金额
    repaymentTotalAmount.value = bill.repaymentTotalAmount // 应还总金额
    paidAmount.value = bill.paidAmount // 已还金额
    lateFee.value = bill.lateFee // 滞纳金
    billStartDate.value = bill.billStartDate
    billDate.value = bill.billDate
    lastPaidDate.value = bill.lastPaidDate
}

const loadData = (id: string | number) => {
    uni.$u.$api.MerchantApi.querySettlementBillManagerDetail(id).then((res: any) => {
        console.log(res)
        let data = res[0]
        billAmount.value = data.billAmount // 本期账单  账期金额
        repaymentTotalAmount.value = data.repaymentTotalAmount // 应还总金额
        paidAmount.value = data.paidAmount // 已还金额
        lateFee.value = data.lateFee // 滞纳金
        billStartDate.value = data.billStartDate
        billDate.value = data.billDate
        lastPaidDate.value = data.lastPaidDate
        payOff.value = data.unpaidAmount === 0 ? 0 : 1
    })
}

/** 去还款 */
const jump2pay = () => {
    let para = {
        id: id.value
    }
    uni.$u.$MRouter.refund.to({ para: JSON.stringify(para) })
}

/** 订单记录 */
const showOrderRecods = () => {
    let para = {
        id: id.value
    }
    uni.$u.$MRouter.orderRecord.to({ para: JSON.stringify(para) })
}
/** 还款记录页面 */
const refundRecord = () => {
    let para = {
        id: id.value
    }
    uni.$u.$MRouter.refundRecord.to({ para: JSON.stringify(para) })
}

const gotoFutureBill = () => {
    let para = {
        id: nextBillId.value
    }
    uni.$u.$MRouter.futureBill.to({ para: JSON.stringify(para) })
}

/** 查看滞纳金 */
const overdueFine = () => {
    uni.$u.$MRouter.overdueFine.to({ id: id.value })
}
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    padding: 20rpx;

    .current-bill {
        position: relative;
        text-align: center;
        margin: 0 auto;
        background: url(@/static/images/bg-zdhk.png);
        background-size: 100% 327rpx;
        width: 100%;
        height: 327rpx;
        border-radius: 10rpx;
        padding: 20rpx;

        .head {
            font-size: 28rpx;

            color: #c75730;
            line-height: 60rpx;
        }

        .total {
            font-size: 48rpx;

            color: #c75730;
            line-height: 60rpx;
        }

        .refund {
            font-size: 26rpx;

            color: #c75730;
            line-height: 60rpx;
        }

        .prepayment-btn {
            width: 200rpx;
            height: 80rpx;
        }

        .record {
            font-size: 28rpx;
            color: #c75730;
            line-height: 60rpx;
            position: absolute;
            top: 20rpx;
            right: 40rpx;
        }
        .refund-record {
            font-size: 28rpx;
            color: #c75730;
            line-height: 60rpx;
            position: absolute;
            top: 20rpx;
            left: 40rpx;
        }
        .payOff {
            color: #c75730;
            line-height: 160rpx;
        }
    }

    .future-bill {
        margin-top: 20rpx;
        background-color: $uni-bg-color;
        padding: 20rpx;
        border-radius: 10rpx;

        .head {
            font-size: 28rpx;

            color: #999999;
            line-height: 60rpx;
        }

        .sum-money {
            font-size: 26rpx;
            font-weight: 600;
            color: #333333;
            line-height: 60rpx;

            .num {
                font-size: 30rpx;
                font-weight: 600;
            }
        }

        .make-bill-date {
            font-size: 28rpx;

            color: #999999;
            line-height: 60rpx;
        }
    }

    .bill-detail {
        margin-top: 20rpx;
        padding: 20rpx;
        background-color: $uni-bg-color;
        border-radius: 10rpx;
        color: #333333;
        line-height: 78rpx;
        font-size: 26rpx;

        .title {
            font-size: 28rpx;
            font-weight: bold;
        }

        .bb {
            border-bottom: 1rpx solid #e5e5e5;
        }
        .contract-code{
            color: #065abb;
        }
    }
}
</style>
